<template>
	<view class="page-box">
		<view v-for="(item,index) in datalist" :key="index">
			<checkbox-group @change="radioChange">
				<view class="order-box">
					<view class="left-box">
						<checkbox :value="item._id" color="#ff6633"  style="transform:scale(0.8)"/>
						<image class="img" :src="item.image"></image>
					</view>
					<view class="right-box"  @click="GoGoodDetail(item.goods_id)">
						<view class="text1">{{item.title}}</view>
						<view class="text2">月销：{{item.num}}</view>
						<view class="text3">{{item.price}}</view>
					</view>
				</view>
			</checkbox-group>
			<view class="fiex-box">
				<view class="btn" @click="Delect(item._id)">删除</view>
				<view class="btn">结算</view>
			</view>
		</view>
		<view class="nodeta" v-if="datalist == ''">空空如也，快去添加商品吧！</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datalist:'',
				id:'',
			}
		},
		onShow() {
			this.GetDateList()
		},
		methods: {
			GetDateList(){
				uni.showLoading({
					title:"加载中"
				})
				uniCloud.callFunction({
					name:'GetCart',
					data:{	
					},
					success: (rest) => {
						uni.hideLoading()
						console.log('获取购物车成功',rest.result.data)
						this.datalist = rest.result.data
					},
					fail: (err) => {
						uni.hideLoading()
						console.log('获取购物车失败',err)
					}
				})
			},
			radioChange(e){
				this.id = e.detail.value
			},
			GoGoodDetail(id){
				console.log(id)
				uni.navigateTo({
					url:'/pages/goods/goods-detail'+`?id=${id}`
				})
				},
			Delect(){
				let that = this
				uni.showModal({
				    title: '温馨提示',
				    content: '确定要删除商品吗？',
					confirmText:'确定删除',
					cancelText:'点错了',
					confirmColor:'#ff6633',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							uniCloud.callFunction({
								name:'DelCart',
								data:{	
								},
								success: (rest) => {
									console.log('删除购物车成功',rest)
									uni.showToast({
									    title: '删除成功',
									    duration: 1000,
										icon:'none'
									});
									that.GetDateList()
								},
								fail: (err) => {
									console.log('删除购物车失败',err)
								}
							})
							
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.order-box{
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		background-color: #FFFFFF;
		padding: 34rpx 60rpx;
		margin-bottom: 24rpx;
		}
	.left-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 12rpx;
		}
	.img{
		width: 210rpx;
		height: 210rpx;
		display: inline-block;
		border-radius: 12rpx;
		margin-left: 10rpx;
		}
	.right-box{
		
		}
	.text1{
		font-size: 30rpx;
		font-weight: bold;
		line-height: 40rpx;
		color: #000000;
		opacity: 1;
		}
	.text2{
		font-size: 26rpx;
		font-weight: 400;
		line-height: 32rpx;
		color: #BCBCBC;
		opacity: 1;
		margin: 20rpx 0rpx;
		}
	.text3{
		font-size: 30rpx;
		font-weight: 600;
		line-height: 40rpx;
		color: #EA5B0C;
		opacity: 1;
		}	
	.radio{
		background-color: #ff6633;
		}
	.fiex-box{
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		padding: 20rpx 0rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		}
	.btn{
		background-color:#ff6633 ;
		color:#FFFFFF;
		width: 45%;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 40rpx;
		display: flex;
		flex-direction: row;
		padding: 20rpx 0rpx;
		border-radius: 40rpx;
		justify-content: center;
		
		}
	.nodeta{
		text-align: center;
		font-size: 30rpx;
		color: #979797;
		line-height: 40rpx;
		padding-top: 400rpx;
	}	
</style>


